<template>
  <div class="swiper-container" @click="hideFn">
    <div class="swiper-wrapper">
      <img v-for="(item, idx) in imgList" :key="item" :src="item" alt="预览图片" :class="['swiper-slide', 'swiper-slide' + idx]" />
    </div>
    <div class="mun-box" v-if="imgList.length">{{ currentIdx + 1 }}/ {{ imgList.length }}</div>
  </div>
</template>

<script>
export default {
  name: 'previewImgH5',
  props: {
    imgList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    maxScale: {
      type: Number,
      default: 3
    },
    minScale: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      mySwiper: null,
      currentIdx: 0,
      store: {
        scale: 1,
        originScale: 1,
        pageX: '',
        pageY: '',
        pageX2: '',
        pageY2: '',
        moveable: false
      }
    };
  },
  watch: {
    currentIdx(newVal, oldVal) {
      this.store.scale = 1;
      this.store.originScale = 1;
      this.$nextTick(() => {
        document.querySelector('.swiper-slide' + newVal).style.transform = 'scale(1)';
        document.querySelector('.swiper-slide' + oldVal).style.transform = 'scale(1)';
      });
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    // 拖动需要结合swiper.js库
    init() {
      let that = this;
      this.mySwiper = new window.Swiper('.swiper-container', {
        on: {
          slideChange: function() {
            that.currentIdx = this.activeIndex;
          }
        }
      });
      this.initImgScale();
    },
    preventFn(e) {
      e.stopPropagation(); // 阻止事件冒泡，点击图片不会关闭预览
    },
    hideFn() {
      this.$emit('hideImg'); // 关闭预览
    },
    touchstartFn(e) {
      let touches = e.touches;
      let events = touches[0];
      let events2 = touches[1];
      e.preventDefault();
      // 第一个触摸点的坐标
      this.store.pageX = events.pageX;
      this.store.pageY = events.pageY;
      this.store.moveable = true;
      if (events2) {
        this.store.pageX2 = events2.pageX;
        this.store.pageY2 = events2.pageY;
      }
      this.store.originScale = this.store.scale || 1;
    },
    touchmoveFn(e) {
      if (!this.store.moveable) {
        return;
      }
      e.preventDefault();
      let touches = e.touches;
      let events = touches[0];
      let events2 = touches[1];
      // 双指移动
      if (events2) {
        // 第2个指头坐标在touchmove时候获取
        if (!this.store.pageX2) {
          this.store.pageX2 = events2.pageX;
        }
        if (!this.store.pageY2) {
          this.store.pageY2 = events2.pageY;
        }

        // 获取坐标之间的举例
        let getDistance = function(start, stop) {
          return Math.hypot(stop.x - start.x, stop.y - start.y);
        };
        // 双指缩放比例计算
        let zoom =
          getDistance(
            {
              x: events.pageX,
              y: events.pageY
            },
            {
              x: events2.pageX,
              y: events2.pageY
            }
          ) /
          getDistance(
            {
              x: this.store.pageX,
              y: this.store.pageY
            },
            {
              x: this.store.pageX2,
              y: this.store.pageY2
            }
          );
        // 应用在元素上的缩放比例
        let newScale = this.store.originScale * zoom;
        // 最大缩放比例限制
        if (newScale > this.maxScale) {
          newScale = this.maxScale;
        } else if (newScale < this.minScale) {
          // 最小缩放比例限制
          newScale = this.minScale;
        }
        // 记住使用的缩放值
        this.store.scale = newScale;
        // 图像应用缩放效果
        document.querySelector('.swiper-slide' + this.currentIdx).style.transform = `scale(${newScale})`;
      }
    },
    touchendFn() {
      this.store.moveable = false;
      delete this.store.pageX;
      delete this.store.pageY;
      delete this.store.pageX2;
      delete this.store.pageY2;
    },
    touchcancelFn() {
      this.store.moveable = false;
      delete this.store.pageX;
      delete this.store.pageY;
      delete this.store.pageX2;
      delete this.store.pageY2;
    },
    initImgScale() {
      document.addEventListener('touchstart', this.touchstartFn);
      document.addEventListener('touchmove', this.touchmoveFn);
      document.addEventListener('touchend', this.touchendFn);
      document.addEventListener('touchcancel', this.touchcancelFn);
    },
    cancelImgScale() {
      document.removeEventListener('touchstart', this.touchstartFn);
      document.removeEventListener('touchmove', this.touchmoveFn);
      document.removeEventListener('touchend', this.touchendFn);
      document.removeEventListener('touchcancel', this.touchcancelFn);
    }
  },
  beforeDestroy() {
    this.cancelImgScale();
  }
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.85);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .swiper-wrapper {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 1001;
    margin: auto;
    img {
      width: 100%;
      max-height: 100%;
    }
  }

  .mun-box {
    position: absolute;
    bottom: 52px;
    left: 20px;
    color: #fff;
    z-index: 9999;
  }
}
</style>
